//数据组件
//咨询师
<template>
    <div>
    <div class="demo-input-size" style="margin-bottom: 20px">
    用户名：
    <el-input
    style="width:400px;margin-bottom: 5px"
    size="medium"
    placeholder="请输入内容"
    v-model="name">
    </el-input>
    <span style="margin-left: 200px;">账号：
    </span>
    <el-input
    style="width:400px;margin-bottom: 5px"
    size="medium"
    placeholder="请输入内容"
    v-model="doctorId">
  </el-input>
  <el-button size="small" style="margin-bottom: 5px;margin-left: 20px;background-color: #BEBEBE" @click="loadPost">查询</el-button>
  <el-button size="small" style="margin-bottom: 5px;margin-left: 20px;background-color: #BEBEBE" @click="add">新增</el-button>
</div>
    <el-table :data="tableData"
    :header-cell-style="{background:'#3DC5A1',color:'#555'}"
    :border="true">
      <el-table-column prop="name" label="用户名" width="150">
      </el-table-column>
      <el-table-column prop="doctorId" label="账号" width="150">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="150">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="150">
      <template #default="scope">
      <el-tag 
          :type="scope.row.sex===1?'primary':'success'"
          disable-transitions>{{scope.row.sex===1?'男':'女'}}
      </el-tag>
      </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="150">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="150">
      </el-table-column>
      <el-table-column prop="skill" label="资讯方向" width="230">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="150">
      </el-table-column>
      <el-table-column prop="operate" label="操作" width="158">
      <template #default="scope">
        <el-popconfirm
          title="确定删除吗？"
          @confirm="del(scope.row.doctorId)"
          style="margin-left:5px">
          <el-button slot="reference" size="small" table="delete" >删除</el-button>
          </el-popconfirm>
            <el-button size="small" table="edit" @click="mod(scope.row)">编辑</el-button>
      </template>

      </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[7, 10, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="用户名" prop="name">
        <el-col :span="15">
      <el-input v-model="form.name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="账号" prop="doctorId">
        <el-col :span="15">
      <el-input v-model="form.doctorId"></el-input></el-col>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-col :span="15">
      <el-input v-model="form.email"></el-input></el-col>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="form.sex">
      <el-radio label="1">男</el-radio>
      <el-radio label="0">女</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-col :span="15">
      <el-input v-model="form.age"></el-input></el-col>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-col :span="15">
      <el-input v-model="form.phone"></el-input></el-col>
      </el-form-item>
      <el-form-item label="资讯方向" prop="skill">
        <el-col :span="15">
      <el-input v-model="form.skill"></el-input></el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="15">
      <el-input v-model="form.password"></el-input></el-col>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
    </span>
    </el-dialog>
    </div>
</template>

<script>
export default {
  name: "DOctor",
  mounted() {
    this.loadPost(); // 确保在组件挂载后加载数据
},
  data() {
      return {
        tableData:[],
        pageNum:1,
        pageSize:7,
        total:1,
        name:'',
        doctorId:'',
        centerDialogVisible:false,
        form:{
          doctorId:"",
          email:"",
          name:"",
          password:"",
          sex:"",
          age:"",
          phone:"",
          skill:""
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          doctorId: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到20 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          age:[
            { required: true, message: '请输入年龄', trigger: 'blur' },
            { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入电话号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度为11 个字符', trigger: 'blur' }
          ],
          kill: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1;
        this.pageSize=val;
        this.loadPost();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val;
        this.loadPost();
      },
        loadGet(){
            this.$axios.get('http://localhost:8082/doctor/list').then(res=>res.data).then(res=>{
                console.log(res);
                this.tableData = res;
            })
        },
        loadPost(){
            this.$axios.post('http://localhost:8082/doctor/listPage',{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              total:this.total,
              param:{
                name:this.name,
                doctorId:this.doctorId
              }
            }).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.code==200){
                    this.tableData = res.data;
                    console.log(this.tableData)
                    this.total=res.total;
                    
                }else{
                    alert("获取失败")
                }
            })
        },
        del(doctorId){
          console.log(doctorId)
            this.$axios.get('http://localhost:8082/doctor/delete?doctorId='+doctorId).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.code==200){
                  this.$message({
                  message: '删除成功'
                });
                  this.loadPost()
                }else{
                  this.$message({
                  message: '删除失败'
                });
                }
            })
          },
        mod(row){
            console.log("修改")
            this.$nextTick(()=>{
            this.resetForm('form')
          })
            //复制到表单
            this.form.name=row.name
            this.form.doctorId=row.doctorId
            this.form.email=row.email
            this.form.sex=row.sex
            this.form.password=row.password
            this.form.age=row.age
            this.form.phone=row.phone
            this.form.skill=row.skill
            this.centerDialogVisible=true

        },
        add(){
          this.centerDialogVisible=true
          this.$nextTick(()=>{
            this.resetForm('form')
          })
        },
        save(){
          this.$refs.form.validate((valid) => {
          if (valid) {
            this.$axios.post('http://localhost:8082/doctor/saveOrMod',this.form).then(res=>res.data).then(res=>{
                console.log(res)
                if (res.code==200){
                  this.$message({
                  message: '添加成功'
                });
                  this.centerDialogVisible=false
                  this.loadPost()
                }else{
                  this.$message({
                  message: '添加失败'
                });
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
          
        },
    beforeMount() {
        this.loadGet();
    },
  }
}
</script>